<template>
  <div style="background-color: #fff;padding:30px;">
    <div
      style="justify-content: space-around;width: 1000px;display: flex;font-size: 14px;background-color: #f5f5f5;padding-top:20px;"
    >
      <div>
        <p style="font-weight: 600;">用能单位</p>
        <p>{{ workshopName }}</p>
      </div>
      <div>
        <p style="font-weight: 600;">仪表型号</p>
        <p>{{ typeName }}</p>
      </div>
      <div>
        <p style="font-weight: 600;">仪表名称</p>
        <p>{{ deviceName }}</p>
      </div>
      <div>
        <p style="font-weight: 600;">网关识别号</p>
        <p>{{ id }}</p>
      </div>
      <div>
        <p style="font-weight: 600;">状态</p>
        <p style="color:green;">正常</p>
      </div>
    </div>
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" tab="基础信息">
        <p style="font-weight: 600;font-size: 16px;">设备信息</p>
        <div style="border:1px solid #ccc;line-height: 35px;;">
          <div style="display: flex;border-bottom:1px solid #ccc;">
            <div
              style="width:10%;text-align: left;padding-left: 10px;border-right:1px solid #ccc;background-color: #f5f5f5;"
            >
              产品名称
            </div>
            <div style="width:15%;text-align: left;padding-left: 10px;border-right:1px solid #ccc;">
              {{ productName }}
            </div>
            <div
              style="width:10%;text-align: left;padding-left: 10px;border-right:1px solid #ccc;background-color: #f5f5f5;"
            >
              设备类型
            </div>
            <div style="width:30%;text-align: left;padding-left: 10px;border-right:1px solid #ccc;">
              {{ deviceType }}
            </div>
            <div
              style="width:10%;text-align: left;padding-left: 10px;border-right:1px solid #ccc;background-color: #f5f5f5;"
            >
              所属机构
            </div>
            <div style="width:20%;text-align: left;padding-left: 10px;">特丝丽</div>
          </div>
          <div style="display: flex;border-bottom:1px solid #ccc;">
            <div
              style="width:10%;text-align: left;padding-left: 10px;border-right:1px solid #ccc;background-color: #f5f5f5;"
            >
              连接协议
            </div>
            <div style="width:15%;text-align: left;padding-left: 10px;border-right:1px solid #ccc;">MQTT</div>
            <div
              style="width:10%;text-align: left;padding-left: 10px;border-right:1px solid #ccc;background-color: #f5f5f5;"
            >
              消息协议
            </div>
            <div style="width:30%;text-align: left;padding-left: 10px;border-right:1px solid #ccc;">mq</div>
            <div
              style="width:10%;text-align: left;padding-left: 10px;border-right:1px solid #ccc;background-color: #f5f5f5;"
            >
              IP地址
            </div>
            <div style="width:15%;text-align: left;padding-left: 10px;">/</div>
          </div>
          <div style="display: flex;">
            <div
              style="width:10%;text-align: left;padding-left: 10px;border-right:1px solid #ccc;background-color: #f5f5f5;"
            >
              创建时间
            </div>
            <div style="width:15%;text-align: left;padding-left: 10px;border-right:1px solid #ccc;">
              {{ createTime }}
            </div>
            <div
              style="width:10%;text-align: left;padding-left: 10px;border-right:1px solid #ccc;background-color: #f5f5f5;"
            >
              注册时间
            </div>
            <div style="width:30%;text-align: left;padding-left: 10px;border-right:1px solid #ccc;">
              {{ createTime }}
            </div>
            <div
              style="width:10%;text-align: left;padding-left: 10px;border-right:1px solid #ccc;background-color: #f5f5f5;"
            >
              最后上线时间
            </div>
            <div style="width:15%;text-align: left;padding-left: 10px;">{{ lastTime }}</div>
          </div>
        </div>
        <p style="font-weight: 600;font-size: 16px;margin-top:30px">配置</p>
        <div style="border:1px solid #ccc;line-height: 35px;display: flex">
          <div
            style="width:10%;text-align: left;padding-left: 10px;border-right:1px solid #ccc;background-color: #f5f5f5;"
          >
            username
          </div>
          <div style="width:30%;text-align: left;padding-left: 10px;border-right:1px solid #ccc;">
            admin
          </div>
          <div
            style="width:10%;text-align: left;padding-left: 10px;border-right:1px solid #ccc;background-color: #f5f5f5;"
          >
            password
          </div>
          <div style="width:30%;text-align: left;padding-left: 10px;border-right:1px solid #ccc;">/</div>
        </div>
        <p style="font-weight: 600;font-size: 16px;margin-top:30px">初始值设置</p>
        <div>
          <a-input placeholder="初始值" style="width:150px;" v-model="iniValue" />
          <a-button type="primary" style="margin-left:10px;" @click="saveIniValue">
            确定
          </a-button>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="日志管理" force-render>
        <a-table
          bordered
          :data-source="dataSource"
          :columns="columns"
          :pagination="ipagination"
          :loading="loading"
          size="small"
          @change="handleTableChange"
        >
        </a-table>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import { pushIfNotExist, filterObj } from '@/utils/util'
import { httpAction, getAction, postAction } from '@/api/manage'
export default {
  name: 'InstrumentInfo',
  components: {},
  props: ['deviceId'],
  data() {
    return {
      workshopName: '',
      typeName: '',
      deviceName: '',
      productName: '',
      deviceType: '',
      createTime: '',
      lastTime: '',
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      dataSource: [],
      iniValue: 0,
      columns: [
        {
          title: '编号',
          dataIndex: 'id'
        },
        {
          title: '表数',
          dataIndex: 'workvalue'
        },
        {
          title: '上传时间',
          dataIndex: 'reportTime'
        },
        {
          title: '类型',
          dataIndex: 'type'
        }
      ]
    }
  },
  methods: {
    getQueryParams() {
      let param = {}
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      return filterObj(param)
    },
    handleTableChange(pagination, filters, sorter) {
      this.ipagination = pagination
      this.loadData(pagination.current)
    },
    callback(key) {
      console.log(key)
    },
    saveIniValue() {
      let url = '/device/eneDevice/edit'
      postAction(url, {
        id: this.deviceId,
        iniValue: this.iniValue
      }).then(res => {
        if (res.code === 200) this.$message.success('操作成功')
        else this.$message.error('操作失败')
        this.deviceInfo()
      })
    },
    deviceInfo() {
      let url = '/device/eneDevice/list?id=' + this.deviceId
      getAction(url, null).then(res => {
        let record = res.result.records[0]
        this.id = record.id
        this.typeName = record.deviceBrandId_dictText + ' / ' + record.deviceTypeId_dictText
        this.deviceName = record.deviceName
        this.workshopName = record.deviceWorkshopId_dictText
        this.deviceType = record.deviceBrandId_dictText + ' / ' + record.deviceTypeId_dictText
        this.productName = record.deviceProductId_dictText
        this.createTime = record.createTime
        this.lastTime = '—'
        this.iniValue = record.iniValue
        this.loadData(1)
      })
    },
    async loadData(arg) {
      if (arg === 1) {
        this.ipagination.current = 1
      }
      let params = this.getQueryParams() //查询条件
      params.workshopName = this.workshopName
      //
      let url = ''
      if (this.deviceType.indexOf('电表') >= 0) url = '/report/view/elec/list'
      else if (this.deviceType.indexOf('水表') >= 0) url = '/report/view/water/list'
      else if (this.deviceType.indexOf('燃气表') >= 0) url = '/report/view/gas/list'
      else if (this.deviceType.indexOf('蒸汽表') >= 0) url = '/report/view/steam/list'
      url += '?pageNo=' + arg
      //
      getAction(url, params).then(res => {
        if (res.success) {
          res.result.records.forEach(t => (t.type = '数据上报'))
          this.dataSource = res.result.records
          this.ipagination.total = res.result.total
          console.log(this.ipagination)
        }
      })
    }
  },
  created() {
    this.deviceInfo()
  }
}
</script>
